<template>
  <div class="min-h-screen bg-gradient">
    <!-- Logo -->
    <div class="yonex-bg-logo">
      <img src="@/assets/Yonex-Logo-PNG_005.png" alt="Yonex Background" class="yonex-background-logo" />
    </div>
    <!-- 头信息 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo-section">
            <div class="logo-icon">
              <img src="@/assets/Yonex-Logo-PNG_005.png" alt="Yonex" class="yonex-small-icon" />
            </div>
            <div>
              <h1 class="logo-title">羽动时刻</h1>
              <p class="logo-subtitle">专业羽毛球场地预约平台</p>
            </div>
          </div>
          <nav class="nav">
            <button class="nav-link" @click="checkLoginAndShow('profile')">👤 个人信息</button>
            <button class="nav-link" @click="checkLoginAndShow('orders')">我的订单</button>
            <button class="nav-link" @click="checkLoginAndShow('announcement')">📢 公告</button>
            <button v-if="!hasToken" class="btn-login" @click="showLoginModal = true">
              登录
            </button>

            <button v-else class="btn-login" @click="logout">退出</button>
          </nav>
        </div>
      </div>
    </header>

    <!-- 信息 -->
    <section class="container hero-section">
      <div class="hero-card">
        <div class="hero-bg-circle-1"></div>
        <div class="hero-bg-circle-2"></div>
        <div class="hero-content">
          <h2 class="hero-title">专业羽毛球场地</h2>
          <p class="hero-subtitle">舒适环境 · 专业设施 · 便捷预约</p>
          <div class="hero-info">
            <div class="info-item">
              <span class="icon">📍</span>
              <span>市中心体育馆</span>
            </div>
            <div class="info-item">
              <span class="icon">🕐</span>
              <span>营业时间 8:00-22:00</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 选择场地 -->
    <section class="container courts-section">
      <h3 class="section-title">选择场地</h3>
      <div class="courts-grid">
        <div
            v-for="court in [...courts].reverse()"
            :key="court.id"
            @click="court.status === 'available' && openBooking(court)"
            :class="['court-card', { 'court-occupied': court.status === 'occupied' }]"
        >
          <div class="court-bg-circle"></div>
          <div class="court-content">
            <div class="court-icon">
              <img src="@/assets/Yonex-Logo-PNG_005.png" alt="Yonex" class="yonex-court-icon" />
            </div>
            <h4 class="court-name">{{ court.name }}</h4>
            <p class="court-price">{{ court.price }}</p>
            <div :class="['court-status', court.status === 'available' ? 'status-available' : 'status-occupied']">
              {{ court.status === 'available' ? '可预约' : '已占用' }}
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 优势信息 -->
    <section class="container features-section">
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">⚡</div>
          <h4 class="feature-title">即时预约</h4>
          <p class="feature-desc">线上快速预约，实时查看场地状态</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🏆</div>
          <h4 class="feature-title">专业设施</h4>
          <p class="feature-desc">标准场地，专业地胶，优质羽毛球</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">💰</div>
          <h4 class="feature-title">价格透明</h4>
          <p class="feature-desc">明码标价，会员优惠，无隐藏费用</p>
        </div>
      </div>
    </section>

    <!-- 公告-->
    <transition name="modal">
      <div v-if="showAnnouncementList" class="modal-overlay" @click.self="showAnnouncementList = false">
        <div class="modal-content announcement-modal">
          <div class="modal-header">
            <h3 class="modal-title">📢 系统公告</h3>
            <button @click="showAnnouncementList = false" class="modal-close">✕</button>
          </div>
          <div class="announcement-list">
            <div
                v-for="announcement in announcements"
                :key="announcement.id"
                @click="viewAnnouncement(announcement)"
                class="announcement-item"
            >
              <div class="announcement-header-item">
                <span class="announcement-badge" v-if="announcement.important">重要</span>
                <h4 class="announcement-item-title">{{ announcement.title }}</h4>
              </div>
              <p class="announcement-date">{{ announcement.date }}</p>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 公告具体信息-->
    <transition name="modal">
      <div v-if="selectedAnnouncement" class="modal-overlay" @click.self="backToAnnouncementList">
        <div class="modal-content announcement-detail-modal">
          <div class="modal-header">
            <h3 class="modal-title">
              <span class="announcement-badge" v-if="selectedAnnouncement.important">重要</span>
              {{ selectedAnnouncement.title }}
            </h3>
            <button @click="backToAnnouncementList" class="modal-close">✕</button>
          </div>
          <div class="announcement-detail">
            <p class="announcement-date">发布时间：{{ selectedAnnouncement.date }}</p>
            <div class="announcement-content">{{ selectedAnnouncement.content }}</div>
          </div>
          <button @click="backToAnnouncementList" class="btn-back">返回公告列表</button>
        </div>
      </div>
    </transition>

    <!-- 登陆注册-->
    <transition name="modal">
      <div v-if="showLoginModal" class="modal-overlay" @click.self="closeLoginModal">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title">{{ isRegisterMode ? '注册账号' : '登录' }}</h3>
            <button @click="closeLoginModal" class="modal-close">✕</button>
          </div>

          <div v-if="!isRegisterMode" class="modal-body">
            <div class="form-group">
              <label class="form-label">手机号</label>
              <input v-model="loginForm.phone" type="tel" placeholder="请输入手机号" class="form-input" />
            </div>
            <div class="form-group">
              <label class="form-label">密码</label>
              <input v-model="loginForm.password" type="password" placeholder="请输入密码" class="form-input" />
            </div>
            <button @click="handleLogin" class="btn-submit">登录</button>
            <p class="switch-mode">还没有账号？<span @click="isRegisterMode = true">立即注册</span></p>
          </div>

          <div v-else class="modal-body">
            <div class="form-group">
              <label class="form-label">手机号</label>
              <input v-model="registerForm.phone" type="tel" placeholder="请输入手机号" class="form-input" />
            </div>
            <div class="form-group">
              <label class="form-label">姓名</label>
              <input v-model="registerForm.name" type="text" placeholder="请输入姓名" class="form-input" />
            </div>
            <div class="form-group">
              <label class="form-label">性别</label>
              <select v-model="registerForm.gender" class="form-input">
                <option value="">请选择性别</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">密码</label>
              <input v-model="registerForm.password" type="password" placeholder="请输入密码" class="form-input" />
            </div>
            <div class="form-group">
              <label class="form-label">确认密码</label>
              <input v-model="registerForm.confirmPassword" type="password" placeholder="请再次输入密码" class="form-input" />
            </div>
            <button @click="handleRegister" class="btn-submit">注册</button>
            <p class="switch-mode">已有账号？<span @click="isRegisterMode = false">立即登录</span></p>
          </div>
        </div>
      </div>
    </transition>

    <!-- 我的订单 -->
    <transition name="modal">
      <div v-if="showOrders" class="modal-overlay" @click.self="showOrders = false">
        <div class="modal-content orders-modal">
          <div class="modal-header">
            <h3 class="modal-title">📋 我的订单</h3>
            <button @click="showOrders = false" class="modal-close">✕</button>
          </div>

          <div class="orders-list">
            <div v-if="orders.length === 0" class="empty-state">
              <p>暂无订单记录</p>
            </div>

            <template v-else>
              <div v-for="order in orders" :key="order.id" class="order-item">
                <div class="order-header">
                  <span class="order-number">订单号：{{ order.orderNumber }}</span>
                  <span :class="['order-status', `status-${mapOrderStatus(order.status)}`]">{{ order.status }}</span>
                </div>

                <div class="order-details">
                  <p><strong>场地：</strong>{{ order.courtName }}</p>
                  <p><strong>预定时间段：</strong>{{ order.timeSlots.join(', ') }}</p>
                  <p><strong>预定日期：</strong>{{ order.bookingDate }}</p>
                  <p><strong>订单时间：</strong>{{ order.orderTime }}</p>
                </div>

                <!-- 取消预约按钮 -->
                <div v-if="order.status === '进行中'" class="order-actions">
                  <button
                      class="cancel-btn"
                      :disabled="isWithinOneHour(order)"
                      @click="cancelOrder(order)"
                  >
                    {{ isWithinOneHour(order) ? '距开场不足1小时，无法取消' : '取消预约' }}
                  </button>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </transition>


    <!-- 个人信息-->
    <transition name="modal">
      <div v-if="showProfile" class="modal-overlay" @click.self="showProfile = false">
        <div class="modal-content profile-modal">
          <div class="modal-header">
            <h3 class="modal-title">👤 个人信息</h3>
            <button @click="showProfile = false" class="modal-close">✕</button>
          </div>

          <div v-if="!isEditingProfile && !isChangingPassword" class="profile-view">
            <div class="profile-info">
              <div class="info-row">
                <span class="info-label">手机号：</span>
                <span class="info-value">{{ userInfo.tel || userInfo.phone || '未设置' }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">姓名：</span>
                <span class="info-value">{{ userInfo.name || '未设置' }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">性别：</span>
                <span class="info-value">{{ userInfo.sex || userInfo.gender || '未设置' }}</span>
              </div>
            </div>
            <div class="profile-actions">
              <button @click="isEditingProfile = true; editForm = { name: userInfo.name || '', gender: userInfo.sex || userInfo.gender || '' }" class="btn-action">修改信息</button>
              <button @click="isChangingPassword = true" class="btn-action">修改密码</button>
              <button @click="logout" class="btn-action btn-logout">退出登录</button>
            </div>
          </div>

          <div v-else-if="isEditingProfile" class="modal-body">
            <div class="form-group">
              <label class="form-label">姓名</label>
              <input v-model="editForm.name" type="text" class="form-input" />
            </div>
            <div class="form-group">
              <label class="form-label">性别</label>
              <select v-model="editForm.gender" class="form-input">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="button-group">
              <button @click="handleUpdateProfile" class="btn-submit">保存</button>
              <button @click="isEditingProfile = false" class="btn-cancel">取消</button>
            </div>
          </div>

          <div v-else-if="isChangingPassword" class="modal-body">
            <div class="form-group">
              <label class="form-label">原密码</label>
              <input v-model="passwordForm.oldPassword" type="password" class="form-input" />
            </div>
            <div class="form-group">
              <label class="form-label">新密码</label>
              <input v-model="passwordForm.newPassword" type="password" class="form-input" />
            </div>
            <div class="form-group">
              <label class="form-label">确认新密码</label>
              <input v-model="passwordForm.confirmPassword" type="password" class="form-input" />
            </div>
            <div class="button-group">
              <button @click="handleChangePassword" class="btn-submit">修改密码</button>
              <button @click="isChangingPassword = false" class="btn-cancel">取消</button>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 预约场地 -->
    <transition name="modal">
      <div v-if="showBooking" class="modal-overlay" @click.self="closeBooking">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title">预约场地</h3>
            <button @click="closeBooking" class="modal-close">✕</button>
          </div>

          <div v-if="!bookingSuccess" class="modal-body">
            <div class="form-group">
              <label class="form-label">场地信息</label>
              <div class="court-info-box">
                <p class="info-name">{{ selectedCourt?.name }}</p>
                <p class="info-price">{{ selectedCourt?.price }}</p>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label">选择日期（可选未来6天）</label>
              <input
                  v-model="selectedDate"
                  type="date"
                  :min="minDate"
                  :max="maxDate"
                  class="form-input"
              />
            </div>

            <div class="form-group">
              <label class="form-label">选择时段（可多选，{{ selectedTimes.length }}个已选）</label>
              <div class="time-slots">
                <button
                    v-for="slot in timeSlots"
                    :key="slot"
                    @click="toggleTime(slot)"
                    :disabled="isTimeSlotPassed(slot)"
                    :class="['time-slot',
                    { 'time-slot-active': selectedTimes.includes(slot) },
                    { 'time-slot-disabled': isTimeSlotPassed(slot) }
                  ]"
                >
                  {{ slot }}
                  <span v-if="isTimeSlotPassed(slot)" class="lock-icon">🔒</span>
                </button>
              </div>
            </div>

            <button
                @click="handleBooking"
                :disabled="!selectedDate || selectedTimes.length === 0"
                class="btn-submit"
            >
              确认预约（{{ selectedTimes.length }}个时段）
            </button>
          </div>

          <div v-else class="success-message">
            <div class="success-icon">✓</div>
            <h4 class="success-title">预约成功！</h4>
            <p class="success-desc">已预约 {{ selectedTimes.length }} 个时段</p>
            <p class="success-desc">请准时到场，祝您运动愉快</p>
          </div>


        </div>
      </div>
    </transition>

    <!-- 脚页 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-grid">
          <div class="footer-col">
            <h5 class="footer-title">关于我们</h5>
            <p class="footer-text">专业的羽毛球场地预约平台，为您提供优质的运动体验。</p>
          </div>
          <div class="footer-col">
            <h5 class="footer-title">联系方式</h5>
            <p class="footer-text">电话：13489589778</p>
            <p class="footer-text">邮箱：1051329170@qq.com</p>
          </div>
          <div class="footer-col">
            <h5 class="footer-title">营业时间</h5>
            <p class="footer-text">周一至周日</p>
            <p class="footer-text">08:00 - 22:00</p>
          </div>
        </div>
        <div class="footer-bottom">
          <p>© 2025 羽动时刻. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {ref, computed, onMounted,watch} from 'vue';
import { loginApi } from '@/api/user/user.js';
import {userTokenStore} from "../../store/token";
import userInfoStore from "../../store/userInfo";
import {getUserInfo} from "@/api/user/user.js";

// 登录状态
const hasToken = ref(false);
const userInfo = ref({});

// 初始化登录状态和用户信息
const initializeAuth = async () => {
  const tokenStore = userTokenStore();
  const userStore = userInfoStore();
  
  // 检查是否有token
  hasToken.value = tokenStore.hasToken;
  
  if (hasToken.value) {
    // 如果有token，尝试获取用户信息
    if (!userStore.info || Object.keys(userStore.info).length === 0) {
      try {
        const response = await getUserInfo();
        if (response.code === 200) {
          userStore.setInfo(response.data);
          userInfo.value = response.data;
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        // 如果获取用户信息失败，清除token
        tokenStore.removeToken();
        userStore.removeInfo();
        hasToken.value = false;
      }
    } else {
      // 如果store中已有用户信息，直接使用
      userInfo.value = userStore.info;
    }
  }
};

onMounted(() => {
  initializeAuth();
  loadAnnouncements();
  loadGymPlace();
});

// Modal状态
const showBooking = ref(false);
const bookingSuccess = ref(false);
const selectedCourt = ref(null);
const selectedDate = ref('');
const selectedTimes = ref([]);
const showAnnouncementList = ref(false);
const selectedAnnouncement = ref(null);
const showLoginModal = ref(false);
const isRegisterMode = ref(false);
const showOrders = ref(false);
const showProfile = ref(false);
const isEditingProfile = ref(false);
const isChangingPassword = ref(false);

// 表单数据
const loginForm = ref({ phone: '', password: '' });
const registerForm = ref({ phone: '', name: '', gender: '', password: '', confirmPassword: '' });
const editForm = ref({ name: '', gender: '' });
const passwordForm = ref({ oldPassword: '', newPassword: '', confirmPassword: '' });

// 订单数据
const orders = ref([]);

const courts = ref([]);

import { findAllGyms } from '@/api/user/user.js';
// 加载公告数据
const loadGymPlace = async () => {
  try {
    const response = await findAllGyms(); // 假设这是你的API调用
    if (response.code === 200) {
      courts.value = response.data.map(item => ({
        id: item.id,
        name: `${item.id}号场地`,
        status: item.status,
        price: `${item.gymprise}元/小时`,
        image: '🏸',
        place: item.place, // 保存24小时预定状态数组
        gymprise: item.gymprise // 保存价格用于计算
      }));
    }
  } catch (error) {
    console.error('加载场地信息失败:', error);
  }
};


const announcements = ref([]);

import { getAllNotices } from '@/api/user/user.js';
// 加载公告数据
const loadAnnouncements = async () => {
  try {
    const response = await getAllNotices();
    if (response.code === 200) {
      // 添加过滤：只显示 isdelete 不为 1 的公告
      announcements.value = response.data
          .filter(item => item.isdelete !== 1) // 新增这一行
          .map(item => ({
            id: item.id,
            title: item.title,
            date: item.publishTime.split(' ')[0], // 从发布时间提取日期
            important: item.level === 1, // 将 level 映射为 important
            content: item.content,
            publisher: item.publisher, // 保留发布者信息
            publishTime: item.publishTime // 保留完整发布时间
          }));
    } else {
      console.error('获取公告失败:', response.mes);
      announcements.value = [];
    }
  } catch (error) {
    console.error('加载公告时出错:', error);
    announcements.value = [];
  }
};

const timeSlots = [
  '08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00',
  '12:00-13:00','13:00-14:00', '14:00-15:00', '15:00-16:00',
  '16:00-17:00', '17:00-18:00', '18:00-19:00', '19:00-20:00',
  '20:00-21:00', '21:00-22:00'
];

const minDate = computed(() => {
  const today = new Date();
  return today.toISOString().split('T')[0];
});

const maxDate = computed(() => {
  const today = new Date();
  today.setDate(today.getDate() + 6);
  return today.toISOString().split('T')[0];
});
// 检查登录并显示对应模块
const checkLoginAndShow = (module) => {
  if (!userTokenStore().hasToken) {
    alert('请先登录！');
    showLoginModal.value = true;
    return;
  }

  if (module === 'announcement') {
    showAnnouncementList.value = true;
  } else if (module === 'orders') {
    loadOrders();
    showOrders.value = true;
  } else if (module === 'profile') {
    showProfile.value = true;
  }
};

// 登录
const handleLogin = async () => {
  if (!loginForm.value.phone || !loginForm.value.password) {
    alert('请填写完整信息！');
    return;
  }

  try {
    // 调用后端登录接口
    const res = await loginApi({
      tel: loginForm.value.phone,
      psw: loginForm.value.password
    });

    if (res.code === 200) {
      // ✅ 从返回中提取 token
      const token = res.data;

      // 保存到 localStorage
      const tokenStore = userTokenStore();
      tokenStore.setToken(token);
      
      // 更新登录状态
      hasToken.value = true;

      // 立即获取用户信息
      try {
        const userResponse = await getUserInfo();
        if (userResponse.code === 200) {
          const userStore = userInfoStore();
          userStore.setInfo(userResponse.data);
          userInfo.value = userResponse.data;
        }
      } catch (userErr) {
        console.error('获取用户信息失败:', userErr);
      }

      alert('登录成功！');
      closeLoginModal();
    } else {
      alert(res.data || '登录失败');
    }
  } catch (err) {
    console.error('登录出错:', err);
    alert('登录失败，请稍后重试');
  }
};
import {usersRegisterService} from "@/api/user/user.js";
import router from "@/router";
// 注册
const handleRegister = async () => {
  const form = registerForm.value;

  if (!form.phone || !form.name || !form.gender || !form.password || !form.confirmPassword) {
    alert('请填写完整信息！');
    return;
  }

  if (form.password !== form.confirmPassword) {
    alert('两次密码输入不一致！');
    return;
  }
  try {
    const response = await usersRegisterService(form);
    if(response.code===200){
      alert('注册成功！')
      isRegisterMode.value = false;
      registerForm.value = { phone: '', name: '', gender: '', password: '', confirmPassword: '' };

    }
    else {
      alert('注册失败：' + (response.mes || '未知错误'));
    }
  }catch (e) {
    alert('注册错误:'+e);
  }

 };

// 退出登录
const logout = () => {
  // 清除所有状态
  hasToken.value = false;
  userInfo.value = {};
  userTokenStore().removeToken();
  userInfoStore().removeInfo();
  showProfile.value = false;
  orders.value = [];
  alert('已退出登录');
};
// 关闭登录模态框
const closeLoginModal = () => {
  showLoginModal.value = false;
  isRegisterMode.value = false;
  loginForm.value = { phone: '', password: '' };
  registerForm.value = { phone: '', name: '', gender: '', password: '', confirmPassword: '' };
};

import { showAllOrderByTel } from '@/api/user/user.js';
// 加载订单
const loadOrders = async () => {
  const response = await showAllOrderByTel(userInfo.value.tel);


  try {
  // 订单数据
  if (response.code === 200) {
    // 将后端返回的数据映射到前端需要的格式
    orders.value = response.data.map(item => ({
      id: item.oderId, // 使用订单ID作为唯一标识
      orderNumber: item.oderId, // 订单号
      courtName: item.oderPlace, // 根据场地ID生成场地名称
      timeSlots: item.playTime.split('   ').filter(slot => slot.trim()), // 分割时间段
      bookingDate: item.playDay.split(' ')[0], // 从下单时间提取日期
      orderTime: item.oderTime, // 下单时间
      status: item.oderStatus // 映射状态
    }));
  } else {
    console.error('获取订单失败:', response.mes);
    orders.value = [];
  }} catch (error) {
    console.error('加载订单时出错:', error);
    orders.value = [];
  }
};


// 状态映射函数
const mapOrderStatus = (status) => {
  const statusMap = {
    '已取消': 'cancelled',
    '进行中': 'pending',
    '已完成': 'completed'
    // 可以根据需要添加更多状态映射
  };
  return statusMap[status] || 'pending'; // 默认返回 pending
};

import { editmessage } from '@/api/user/user.js';
// 修改个人信息
const handleUpdateProfile = async () => {
  if (!editForm.value.name || !editForm.value.gender) {
    alert('请填写完整信息！');
    return;
  }

  // TODO: 调用后端API更新信息
  const response = await editmessage(userInfo.value.tel,editForm.value.name,editForm.value.gender);
  if (response.code === 200) {
    userInfo.value.name = editForm.value.name;
    userInfo.value.sex = editForm.value.gender;

    // 同时更新store中的信息
    const userStore = userInfoStore();
    userStore.setInfo(userInfo.value);

    alert('修改成功！');
    isEditingProfile.value = false;
  }else {
    alert('修改失败：' + response.message);
  }
};

import { editpsw } from '@/api/user/user.js';
// 修改密码
const handleChangePassword = async() => {
  const form = passwordForm.value;

  if (!form.oldPassword || !form.newPassword || !form.confirmPassword) {
    alert('请填写完整信息！');
    return;
  }

  if (form.newPassword !== form.confirmPassword) {
    alert('两次新密码输入不一致！');
    return;
  }

  // TODO: 调用后端API修改密码
  const response = await editpsw(userInfo.value.tel,form.oldPassword,form.newPassword);
  if(response.code === 200) {
    alert(response.data);
    isChangingPassword.value = false;
    passwordForm.value = {oldPassword: '', newPassword: '', confirmPassword: ''};
  }else {
    alert('修改失败：' + response.message);
  }
};

const isTimeSlotPassed = (slot) => {
  if (!selectedDate.value) return false;

  const today = new Date();
  const selectedDateObj = new Date(selectedDate.value);

  // 时间槽与24小时数组的映射关系
  const timeSlotToHourMap = {
    '08:00-09:00': 8,
    '09:00-10:00': 9,
    '10:00-11:00': 10,
    '11:00-12:00': 11,
    '12:00-13:00': 12,
    '13:00-14:00': 13,
    '14:00-15:00': 14,
    '15:00-16:00': 15,
    '16:00-17:00': 16,
    '17:00-18:00': 17,
    '18:00-19:00': 18,
    '19:00-20:00': 19,
    '20:00-21:00': 20,
    '21:00-22:00': 21
  };

  // 1. 检查是否被预定（新增多天支持）
  if (selectedCourt.value && selectedCourt.value.place) {
    const dayIndex = getDayIndex(selectedDateObj); // 获取日期对应的数组索引
    const hourIndex = timeSlotToHourMap[slot];

    console.log(`检查预定状态: 日期=${selectedDate.value}, 天索引=${dayIndex}, 小时=${hourIndex}, 时间段=${slot}`);

    if (dayIndex !== -1 && hourIndex !== undefined) {
      // 检查二维数组中对应位置的预定状态
      const dayArray = selectedCourt.value.place[dayIndex];
      if (dayArray && dayArray[hourIndex] === 1) {
        console.log(`时间段 ${slot} 已被预定`);
        return true; // 被预定
      }
    }
  }

  // 2. 原有的时间检查逻辑
  if (selectedDateObj.toDateString() !== today.toDateString()) {
    return false;
  }

  const currentHour = today.getHours();
  const currentMinute = today.getMinutes();
  const currentTime = currentHour * 60 + currentMinute;

  const endTime = slot.split('-')[1];
  const [endHour, endMinute] = endTime.split(':').map(Number);
  const slotEndTime = endHour * 60 + endMinute;

  return currentTime >= slotEndTime;
};

/**
 * 根据日期获取在place二维数组中的索引
 * 0=今天, 1=明天, 2=后天, ..., 6=6天后
 */
const getDayIndex = (selectedDate) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 设置为当天开始时间

  const targetDate = new Date(selectedDate);
  targetDate.setHours(0, 0, 0, 0);

  // 计算日期差（天数）
  const timeDiff = targetDate.getTime() - today.getTime();
  const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

  console.log(`日期计算: 今天=${today.toDateString()}, 选择=${targetDate.toDateString()}, 天数差=${dayDiff}`);

  // 只处理今天到未来6天
  if (dayDiff >= 0 && dayDiff <= 6) {
    return dayDiff;
  }

  return -1; // 超出范围
};

const openBooking = (court) => {
  selectedCourt.value = court;
  showBooking.value = true;
  selectedDate.value = minDate.value;
};

const closeBooking = () => {
  showBooking.value = false;
  bookingSuccess.value = false;
  selectedCourt.value = null;
  selectedDate.value = '';
  selectedTimes.value = [];
};

const toggleTime = (slot) => {
  if (isTimeSlotPassed(slot)) return;

  const index = selectedTimes.value.indexOf(slot);
  if (index > -1) {
    selectedTimes.value.splice(index, 1);
  } else {
    selectedTimes.value.push(slot);
  }
};

const generateBookingPayload = () => {
  if (!userInfo.value.tel || !selectedCourt.value || !selectedDate.value || selectedTimes.value.length === 0) {
    return null;
  }

  const today = new Date();
  const selectedDateObj = new Date(selectedDate.value);
  today.setHours(0, 0, 0, 0);
  selectedDateObj.setHours(0, 0, 0, 0);

  const dayDiff = Math.floor((selectedDateObj - today) / (1000 * 60 * 60 * 24));

  // 每个时间段对应的小时编号（按1~24编号）
  const timeSlotToIndexMap = {
    '08:00-09:00': 8,
    '09:00-10:00': 9,
    '10:00-11:00': 10,
    '11:00-12:00': 11,
    '12:00-13:00': 12,
    '13:00-14:00': 13,
    '14:00-15:00': 14,
    '15:00-16:00': 15,
    '16:00-17:00': 16,
    '17:00-18:00': 17,
    '18:00-19:00': 18,
    '19:00-20:00': 19,
    '20:00-21:00': 20,
    '21:00-22:00': 21
  };

  const times = selectedTimes.value.map(slot => {
    const hourIndex = timeSlotToIndexMap[slot];
    return dayDiff * 24 + hourIndex;  // day*24+hour
  });

  return {
    tel: userInfo.value.tel,
    id: selectedCourt.value.id,
    times: times
  };
};


watch(selectedDate, () => {
  selectedTimes.value = []
})

import { bookPlace } from '@/api/user/user.js';

const handleBooking = async () => {
  if (!hasToken.value) {
    alert('请先登录！');
    showBooking.value = false;
    showLoginModal.value = true;
    return;
  }

  if (!selectedCourt.value || !selectedDate.value || selectedTimes.value.length === 0) {
    alert('请选择日期和时间段！');
    return;
  }

  const payload = generateBookingPayload();
  if (!payload) {
    alert('数据生成失败，请检查选择信息');
    return;
  }

  try {
    const response = await bookPlace(payload);
    if (response.code === 200) {
      bookingSuccess.value = true;
      setTimeout(() => {
        closeBooking();
      }, 2500);

    } else {
      alert('预约失败：' + (response.mes || '未知错误'));
    }
  } catch (error) {
    console.error('预约请求出错:', error);
    alert('网络错误，请稍后重试');
  }
};


// 判断是否可以取消（前端判断距离预约开始是否>1小时）
const isWithinOneHour = (order) => {
  try {
    const now = new Date();
    // 取第一个时间段作为起始时间
    const startHour = order.timeSlots[0].split('-')[0].trim(); // e.g. "08:00"
    const bookingDateTime = new Date(`${order.bookingDate} ${startHour}`);
    const diff = (bookingDateTime - now) / (1000 * 60); // 分钟差
    return diff <= 60;
  } catch {
    return false;
  }
};
import {UnBookPlace} from '@/api/user/user.js';

const cancelOrder = async (order) => {
  if (!confirm(`确定要取消订单 ${order.orderNumber} 吗？`)) return;
  try {
    // 计算 timeIndexes
    const now = new Date();
    const orderDate = new Date(order.bookingDate); // 比如 "2025-10-30"
    const diffDays = Math.floor((orderDate - new Date(now.getFullYear(), now.getMonth(), now.getDate())) / (1000 * 60 * 60 * 24));


    // 根据 playTime 转换为小时索引
    const timeIndexes  = order.timeSlots.map(slot => {
      const startHour = parseInt(slot.split(':')[0], 10);
      return diffDays * 24 + startHour;
    });
    console.log("计算得到的 timeIndexes =", timeIndexes);
    const payload = {
      tel: userInfo.value.tel,
      id: order.courtName,
      times: timeIndexes
    };
    const response = await UnBookPlace(order.orderNumber, payload);
    if (response.code === 200) {
      alert('✅ 取消成功');
      loadOrders();
    } else {
      alert('❌ 取消失败: ' + (response.mes || '未知错误'));
    }
  } catch (err) {
    console.error(err);
    alert('取消失败，请稍后再试');
  }
};

const viewAnnouncement = (announcement) => {
  showAnnouncementList.value = false;
  selectedAnnouncement.value = announcement;
};

const backToAnnouncementList = () => {
  selectedAnnouncement.value = null;
  showAnnouncementList.value = true;
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bg-gradient {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 30%, #bae6fd 60%, #7dd3fc 100%);
  min-height: 100vh;
  position: relative;
}

/* Yonex Background Logo */
.yonex-bg-logo {
  position: fixed;
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.08;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1000px;
  height: 1000px;
}

.yonex-background-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, #0056B8, #00A651);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  user-select: none;
  padding: 0.5rem;
}

.yonex-small-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*filter: brightness(0);*/
}

/*.logo-icon:hover {*/
/*  transform: rotate(12deg);*/
/*}*/

.logo-title {
  font-size: 1.5rem;
  font-weight: bold;
  background: linear-gradient(to right, #0056B8, #00A651);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-link {
  color: #4b5563;
  background: none;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #0056B8;
}

.btn-login {
  background: linear-gradient(to right, #0056B8, #00A651);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-login:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.hero-section {
  padding: 3rem 0;
  position: relative;
  z-index: 10;
}

.hero-card {
  background: linear-gradient(to right, #0056B8, #00A651, #1e40af);
  border-radius: 1.5rem;
  padding: 3rem;
  color: white;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.hero-bg-circle-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin-right: -8rem;
  margin-top: -8rem;
}

.hero-bg-circle-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24rem;
  height: 24rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin-left: -12rem;
  margin-bottom: -12rem;
}

.hero-content {
  position: relative;
  z-index: 10;
}

.hero-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #e0f2fe;
  margin-bottom: 2rem;
}

.hero-info {
  display: flex;
  gap: 2rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon {
  font-size: 1.25rem;
}

.courts-section {
  padding: 3rem 0;
  position: relative;
  z-index: 10;
}

.section-title {
  user-select: none;
  font-size: 1.875rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 2rem;
  text-align: center;
}

.courts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.court-card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.court-card:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-0.5rem);
}

.court-occupied {
  opacity: 0.6;
  cursor: not-allowed;
}

.court-bg-circle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
  border-radius: 50%;
  margin-right: -4rem;
  margin-top: -4rem;
}

.court-content {
  position: relative;
  z-index: 10;
}

.court-icon {
  user-select: none;
  font-size: 4rem;
  text-align: center;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
}

.yonex-court-icon {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.court-name {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.court-price {
  color: #0056B8;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.court-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-available {
  background: #d1fae5;
  color: #065f46;
}

.status-occupied {
  background: #fee2e2;
  color: #991b1b;
}

.features-section {
  padding: 3rem 0;
  position: relative;
  z-index: 10;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: box-shadow 0.3s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.feature-card:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 4rem;
  height: 4rem;
  background: linear-gradient(135deg, #0056B8, #00A651);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
  user-select: none;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.5rem;
  user-select: none;
}

.feature-desc {
  color: #6b7280;
  user-select: none;
}

.announcement-modal {
  max-width: 600px;
}

.announcement-list {
  max-height: 500px;
  overflow-y: auto;
}

.announcement-item {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.3s;
}

.announcement-item:hover {
  background: #f9fafb;
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-header-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.announcement-badge {
  background: linear-gradient(to right, #ef4444, #dc2626);
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: bold;
}

.announcement-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.announcement-date {
  font-size: 0.875rem;
  color: #6b7280;
}

.announcement-detail-modal {
  max-width: 600px;
}

.announcement-detail {
  padding: 1rem 0;
}

.announcement-content {
  margin-top: 1rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  line-height: 1.8;
  color: #374151;
  white-space: pre-line;
}

.btn-back {
  width: 100%;
  background: #6b7280;
  color: white;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 1rem;
}

.btn-back:hover {
  background: #4b5563;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.modal-content {
  background: white;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 28rem;
  width: 100%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s;
}

.modal-close:hover {
  color: #4b5563;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.court-info-box {
  background: linear-gradient(to right, #ecfeff, #ccfbf1);
  border-radius: 0.75rem;
  padding: 1rem;
}

.info-name {
  font-weight: bold;
  color: #1f2937;
}

.info-price {
  color: #0d9488;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: all 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #0056B8;
  box-shadow: 0 0 0 3px rgba(0, 86, 184, 0.1);
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-height: 12rem;
  overflow-y: auto;
}

.time-slot {
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: none;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.time-slot:hover {
  background: linear-gradient(to right, #0056B8, #00A651);
  color: white;
}

.time-slot-active {
  background: linear-gradient(to right, #0056B8, #00A651);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.time-slot-disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.5;
}

.lock-icon {
  margin-left: 0.25rem;
  font-size: 0.75rem;
}

.switch-mode {
  text-align: center;
  margin-top: 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}

.switch-mode span {
  color: #0056B8;
  cursor: pointer;
  font-weight: 600;
}

.switch-mode span:hover {
  text-decoration: underline;
}

.orders-modal {
  max-width: 700px;
}

.orders-list {
  max-height: 500px;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: #9ca3af;
}

.order-item {
  background: #f9fafb;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.order-item:last-child {
  margin-bottom: 0;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.order-number {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.875rem;
}

.order-status {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-pending {
  background: #dbeafe;
  color: #1e40af;
}

.status-completed {
  background: #d1fae5;
  color: #065f46;
}

.status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.order-details p {
  color: #4b5563;
  font-size: 0.875rem;
}

.profile-modal {
  max-width: 500px;
}

.profile-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.profile-info {
  background: #f9fafb;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.info-row {
  display: flex;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: #4b5563;
  width: 6rem;
}

.info-value {
  color: #1f2937;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-action {
  width: 100%;
  background: linear-gradient(to right, #0056B8, #00A651);
  color: white;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-action:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.btn-logout {
  background: linear-gradient(to right, #ef4444, #dc2626);
}

.button-group {
  display: flex;
  gap: 0.75rem;
}

.btn-cancel {
  flex: 1;
  background: #6b7280;
  color: white;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel:hover {
  background: #4b5563;
}

.btn-submit {
  width: 100%;
  background: linear-gradient(to right, #0056B8, #00A651);
  color: white;
  padding: 1rem;
  border-radius: 0.75rem;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-submit:hover:not(:disabled) {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.success-message {
  text-align: center;
  padding: 2rem 0;
}

.success-icon {
  width: 5rem;
  height: 5rem;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin: 0 auto 1rem;
}

.success-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.success-desc {
  color: #6b7280;
}

.footer {
  background: linear-gradient(to right, #1f2937, #111827);
  color: white;
  margin-top: 5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 3rem 0;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.footer-text {
  color: #9ca3af;
  line-height: 1.6;
}

.footer-bottom {
  border-top: 1px solid #374151;
  padding: 2rem 0;
  text-align: center;
  color: #9ca3af;
}


.modal-enter-active .modal-content,
.modal-leave-active .modal-content {
  transition: transform 0.3s;
}

.modal-enter-from .modal-content,
.modal-leave-to .modal-content {
  transform: scale(0.9);
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-info {
    flex-direction: column;
    gap: 1rem;
  }

  .nav {
    gap: 0.75rem;
  }

  .nav-link {
    font-size: 0.875rem;
  }

  .time-slots {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 移动端背景logo调整 */
  .yonex-bg-logo {
    width: 600px;
    height: 600px;
    right: -5%;
    opacity: 0.05;
  }
}


.order-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.cancel-btn {
  background-color: #ff8700; /* 浅绿色主色调 */
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.cancel-btn:hover {
  background-color: #d5621b;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(183, 133, 82, 0.4);
}

.cancel-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(183, 125, 83, 0.3);
}

.cancel-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  color: #666;
}




</style>
